<template>
  <div class="home">
    <div class="content" ref="content"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import * as THREE from 'three';
import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { svgToModel } from '@/common/buildings/svgmodel.js';
const svgLoader = new SVGLoader();
let meshGroup = new THREE.Group();
const content = ref(null);
const position = {
  x: 800,
  y: 800,
  z: 800,
};
const lookat = {
  x: 0,
  y: 0,
  z: 0,
};
let width = window.innerWidth;
let height = window.innerHeight;
let camera = new THREE.PerspectiveCamera(45, width / height, 10, 500000); //摄像机对象
let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true,
});
let controls = new OrbitControls(camera, renderer.domElement);
const initScene = () => {
  const ambient = new THREE.AmbientLight(0xffffff, 0.6);
  scene.add(ambient);
  // 平行光
  var dtLight = new THREE.DirectionalLight(0xffffff, 0.4);
  dtLight.position.set(0, 100, 0);
  scene.add(dtLight);
  // 半球光
  var light = new THREE.HemisphereLight(0xffffff, 0x000000, 0.12);
  light.position.set(0, 1, 0);
  scene.add(light);
  // 辅助坐标
  const axesHelper = new THREE.AxesHelper(500);
  scene.add(axesHelper);
  // 修改相机,场景的参数
  camera.position.set(position.x, position.y, position.z);
  camera.lookAt(lookat.x, lookat.y, lookat.z);
  controls.target = new THREE.Vector3(lookat.x, lookat.y, lookat.z);
  controls.enableDamping = true; // 使动画循环使用时阻尼或自转
  controls.dampingFactor = 0.6; // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
  controls.enableRotate = true; // 是否可以旋转
  controls.enableZoom = 3500; // 最大距离
  // controls.maxPolarAngle = Math.PI / 2.5; // 控制上下旋转最大角度
  // controls.minPolarAngle = Math.PI / 2; // 控制上下旋转最小角度
  controls.panSpeed = 2; // 位移速度
  controls.minDistance = 100; // 设置相机距离原点的最近距离
  controls.maxDistance = 25000; // 设置相机距离原点的最远距离
  controls.enablePan = true; // 是否开启右键拖拽
  //render的相关设置 .清晰度乘以3场景更清晰
  renderer.setPixelRatio(window.devicePixelRatio * 1.5);
  renderer.setSize(width, height);
  renderer.setClearColor(0x333333, 1);
  loadSvg();
  return renderer.domElement;
};
const loadSvg = () => {
  svgLoader.load('./svg/园区2D3F-2.svg', (data) => {
    console.log('svg数据', data);
    let group = svgToModel(data, 'test', 1, 'jingling');
    meshGroup.add(group);
    scene.add(meshGroup);
    console.log('scene', scene);
  });
};
const onWindowResize = () => {
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
};
const Render = () => {
  controls.update();
  // console.log(camera.position);
  renderer.render(scene, camera);
  requestAnimationFrame(Render);
};
onMounted(() => {
  content.value.appendChild(initScene());
  Render();
  window.addEventListener(
    'resize',
    () => {
      onWindowResize(this.mapdata);
    },
    false
  );
});
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  // background-color: #ff3200;
}
</style>
